<template>
  <div>
    <!-- 背景 -->
    <div class="page-bg"></div>
    <div class="page-wrap">
      <!-- 标题 -->
      <h2>接线图</h2>
      <!-- 是否核对 -->
      <div class="card is-checked-wrap">
        <div v-if="!isCheck" class="content">
          <div class="desc">核对图版一致性是否需要修改改电子图版</div>
          <div class="btn-blue" @click="isCheck = true">是</div>
          <div class="btn-red" @click="back">否</div>
        </div>
        <div v-else class="content content2">
          <div class="btn-blue" @click="saveData">修改完成</div>
          <div class="btn-red" @click="isCheck = false">返回</div>
        </div>
      </div>
      <!-- 电子图 -->
      <div class="card elect-draw-wrap">
        <!-- 电子图 -->
        <DrawCheck
          v-if="model.statroomnumber"
          ref="draw"
          :model="model"
          :isCheck="isCheck"
          class="cavs"
        ></DrawCheck>
        <!-- <div id="container" class="cavs"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import DrawCheck from "@/components/drawCheck.vue";
import { saveSubstationFile } from "@/request/api.js";
export default {
  name: "electDrawCheck",
  components: { DrawCheck },
  data() {
    return {
      isCheck: false,
      model: {
        statroomname: "",
        statroomnumber: "",
        verifyjson: "",
      },
    };
  },
  mounted() {
    if (this.$route.query) {
      this.model.statroomname = this.$route.query.statroomname;
      this.model.statroomnumber = this.$route.query.statroomnumber;
    }
  },
  methods: {
    saveData() {
      let data = this.$refs.draw.graph.toJSON();
      // console.log(JSON.stringify(data, null, 2));
      this.model.verifyjson = JSON.stringify(data, null, 2);
      this.saveSubstationFile();
    },
    // 保存数据
    async saveSubstationFile() {
      let res = await saveSubstationFile(this.model);
      if (res.success) {
        this.$message.success("保存成功");
      } else {
        this.$message.error("保存失败");
      }
    },
    back() {
      this.$router.push("/electDrawList");
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, #00796a 0%, #f4f5f9 50%);
}

.page-wrap {
  position: relative;
  z-index: 1;
  padding: 20px 30px;
}

.btn-blue {
  background: linear-gradient(90deg, #017a6b 0%, #60bfb4 100%);
  border-radius: 10px;
  font-size: 48px;
  color: #ffffff;
  cursor: pointer;
  @extend .flex-center;
}

.btn-red {
  background: linear-gradient(-35deg, #ff7c7c, #f64242);
  border-radius: 10px;
  font-size: 48px;
  cursor: pointer;
  color: #ffffff;
  @extend .flex-center;
}

.is-checked-wrap {
  position: relative;
  height: 200px;

  .content {
    position: absolute;
    width: 120px;
    height: calc(100vw - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    top: 160px;
  }

  .desc {
    width: 48px;
    line-height: 1;
    font-size: 48px;
    color: #666666;
    writing-mode: vertical-rl;
    white-space: nowrap;
  }

  .btn-blue,
  .btn-red {
    width: 100px;
    height: 120px;
  }
  .content2 {
    .btn-blue,
    .btn-red {
      width: 100px;
      height: 300px;
      padding: 0 30px;
      line-height: 1;
    }
  }
}

.elect-draw-wrap {
  position: relative;
  background: #f8f8f8;
  box-shadow: 0px 0px 25px 0px rgba(67, 99, 89, 0.1);

  .cavs {
    width: 100%;
    height: calc(100vh - 180px);
  }
}
</style>
